<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可扩展的流程图</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="workflow.js"></script>
    <style>
        html, body {
            background: #F5F5F7;
            width: 100%;
            height: 100%;
        }

        .fd-nav-content {
            width: 100%;
            height: 100%;
            padding: 30px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>

<div class="fd-nav-content"></div>

<script>
    var data = '{"1":{"key":1,"type":"start","name":"发起人","content":"请设置发起人"},"2":{"key":2,"type":"end","name":"结束流程"},"3":{"key":3,"type":"branch","name":"分支"},"4":{"key":4,"type":"condition","name":"条件","content":"请设置条件","level":"优先级"},"5":{"key":5,"type":"condition","name":"条件","content":"请设置条件","level":"优先级"},"6":{"key":6,"type":"cc","name":"抄送人","content":"请设置抄送人"},"7":{"key":7,"type":"verify","name":"审核人","content":"请设置审核人"},"8":{"key":8,"type":"verify","name":"审核人","content":"请设置审核人"},"10":{"key":10,"type":"condition","name":"条件","content":"请设置条件","level":"优先级"},"11":{"key":11,"type":"verify","name":"审核人","content":"请设置审核人"}}';

    var line = '{"1":{"prev":0,"current":1,"next":3},"2":{"prev":3,"current":2,"next":0},"3":{"prev":1,"current":3,"next":6,"branch":[4,5,10]},"4":{"prev":3,"current":4,"next":7},"5":{"prev":3,"current":5,"next":8},"6":{"prev":3,"current":6,"next":2},"7":{"prev":4,"current":7,"next":6},"8":{"prev":5,"current":8,"next":6},"10":{"prev":3,"current":10,"next":11},"11":{"prev":10,"current":11,"next":6}}';

    workflow.render({
        elem: '.fd-nav-content',
        data: JSON.parse(data),
        line: JSON.parse(line),
        click: function (key, d, l) {
            console.log(key);
            console.log(d);
            console.log(l);
        },
        change: function (d, l) {
            console.log(d);
            console.log(l);
        },
    });
</script>

</body>
</html>